﻿@inherits LayoutComponentBase

@using BlazorFinancePortfolio.Services
@using BlazorFinancePortfolio.Models
@using BlazorFinancePortfolio.Client.Pages

@inject CurrenciesService currenciesService

<TelerikRootComponent>
    <nav class="navbar navbar-expand-lg py-3 header">
        <div class="container d-flex justify-content-between">
            <div class="title-wrap">
                <h1 class="header-title">My Stocks Portfolio</h1>

                <div class="d-flex flex-wrap justify-content-between">
                    <TelerikDropDownList Data="@Currencies"
                                        Value="@SelectedCurrencyName"
                                        TValue="string"
                                        TItem="Currency"
                                        ValueField="Symbol"
                                        TextField="Name"
                                        PopupWidth="200px"
                                        PopupHeight="auto"
                                        Width="200px"
                                        ValueChanged="@OnCurrencySelect"
                                        Class="ddl-no-bg">

                    </TelerikDropDownList>

                    <a href="https://github.com/telerik/blazor-ui/blob/master/sample-applications/blazor-stocks/" target="_blank" class="source-code-link text-white-50 d-flex align-items-center ">
                        <svg class="navbar-nav-svg mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"></path></svg>
                        Source Code
                    </a>
                </div>
            </div>
            <div @onclick="@ShowProfile" class="profile-wrapper d-flex flex-column align-self-center"
                 tabindex="0">
                <div class="profile-image">

                </div>
                <div class="text-white-50">Collin Johnson</div>
            </div>
        </div>
    </nav>

    <main class="container-fluid px-0">

        <div class="content px-4">

            @if (Installable)
            {
                <div class="fixed-bottom d-flex align-items-center justify-content-between install-prompt">
                    <span>Install this app?</span>
                    <span>
                        <button class="btn btn-light btn-sm mx-2" @onclick="@InstallClicked">Install</button>
                        <button class="btn btn-outline-light btn-sm" @onclick="@(()=>Installable=false)">Cancel </button>
                    </span>
                </div>
            }

        <CascadingValue Value="@SelectedCurrency">
            @Body
            <UserProfile @bind-IsProfileVisible="@ProfileVisible" />
        </CascadingValue>
        </div>
    </main>
    <footer class="container-fluid footer text-center d-flex align-items-center">
        <div class="w-100">
            <span class="footer-copyright text-center">
                Copyright ©2019-@DateTime.Now.Year Progress Software
                Corporation and/or its subsidiaries or affiliates.
            </span><span class="progress-logo d-inline-flex"></span>
        </div>
    </footer>
</TelerikRootComponent>


@code{
    public Currency SelectedCurrency { get; set; }
    bool ProfileVisible { get; set; }
    List<Currency> Currencies { get; set; }
    public string SelectedCurrencyName { get; set; } = "USD";

    void OnCurrencySelect(string selectedCurrencySymbol)
    {
        SelectedCurrency = Currencies.FirstOrDefault(c => c.Symbol == selectedCurrencySymbol);
        SelectedCurrencyName = selectedCurrencySymbol;

        StateHasChanged();
    }

    protected override async Task OnInitializedAsync()
    {
        ml = () => InvokeAsync(StateHasChanged);// PWA infrastructure

        Currencies = await currenciesService.GetCurrenciesAsync();

        SelectedCurrency = Currencies.FirstOrDefault();
    }

    async Task ShowProfile()
    {
        ProfileVisible = true;
        await JSRuntime.InvokeVoidAsync("toggleScroll", false);
    }

    // PWA infrastructure
    [Inject] IJSRuntime JSRuntime { get; set; } // needs to be here not as a @inject directive
    static bool Installable = false;
    static Action ml;

    [JSInvokable("InstallPwaPrompt")]
    //a named method so that it is easy to call from JS Interop
    public static Task InstallPwaPrompt()
    {
        Installable = true;
        ml.Invoke();
        return Task.CompletedTask;
    }

    async void InstallClicked(MouseEventArgs args)
    {
        Installable = false;
        await JSRuntime.InvokeAsync<object>("OnPwaInstallClick");
    }
}
